<template>
  <div class="idea">
    <h1 class="title">意见新增</h1>
    <div class="Comments">
      <el-steps :active="active" class="line">
        <el-step title=" 意见新增" description="第一步" />
        <el-step title=" 意见内容" description="第二步" />
        <el-step title=" 意见提交" description="第三步" />
      </el-steps>
      <div class="card">
        <el-card v-if="active === 0" class="box-card">
          <div class="input">
            <p>意见标题</p>
            <el-input v-model="input" placeholder="请输入意见标题" />
          </div>
          <div class="input1">
            <p>意见分类</p>
            <el-cascader
              :options="options"
              placeholder="请选择意见分类"
              v-model="OpinionClassification"
            />
          </div>
        </el-card>

        <el-card v-if="active === 1" class="box-card">
          <h1>{{ input }}</h1>
          <textarea cols="210" rows="27" v-model="textarea"> </textarea>
        </el-card>

        <el-card v-if="active === 2" class="box-card">
          <div>这是意见发表页面</div>
        </el-card>
      </div>
      <div class="button">
        <el-button
          v-show="active !== 2"
          style="margin-top: 12px"
          @click="next"
          type="primary"
          >下一步</el-button
        >
        <el-button
          v-show="active !== 0"
          style="margin-top: 12px"
          @click="last"
          type="danger"
          >上一步</el-button
        >
        <el-button
          v-show="active == 2"
          style="margin-top: 12px"
          type="primary"
          @click="IssueOpinion"
          >发表意见</el-button
        >
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { addadviseone } from "@/api/api";
import { useRouter } from "vue-router";
const router = useRouter();
const input = ref("");
const active = ref(0);
const textarea = ref("");
const OpinionClassification = ref("");
const options = reactive([
  {
    value: "wufuyijian",
    label: "服务意见",
    children: [
      {
        value: "baoxianfuwu",
        label: "保险服务",
      },
      {
        value: "wuxiefuwu",
        label: "维修服务",
      },
      {
        value: "huifangyijian",
        label: "回访服务",
      },
      {
        value: "disciplinesadas",
        label: "客服服务",
      },
    ],
  },
  {
    value: "good",
    label: "绩效意见",
    children: [
      {
        value: "disclinedffsdasds",
        label: "加班意见",
      },
      {
        value: "discipsadas",
        label: "薪资意见",
      },
    ],
  },
  {
    value: "good",
    label: "其他意见",
    children: [
      {
        value: "disclinedffsdasds",
        label: "生活意见",
      },
      {
        value: "discipsadas",
        label: "服务意见",
      },
      {
        value: "discipsadas",
        label: "前台意见",
      },
    ],
  },
]);
const next = () => {
  //下一步按钮
  if (input.value && OpinionClassification.value[0]) {
    active.value++;
    // console.log("active.value", active.value);
    if (active.value > 2) active.value = 0;
  }
};

const last = () => {
  active.value--;
  // console.log(" active.value", active.value);
};

const IssueOpinion = async () => {
  //发表意见按钮
  const object = JSON.parse(localStorage.getItem("good"));
  console.log(object, "object");
  const res = await addadviseone({
    avatar: "public/upload/FX2301-1677854308050-wd.jpg",
    class: object.userInfo.result.class,
    color: "#ee4444",
    dbpass: object.userInfo.result.dbpass,
    id: 1,
    label: "学员",
    menus: [],
    nickname: object.userInfo.result.nickname,
    password: object.userInfo.result.password,
    phone: object.userInfo.result.phone,
    role: object.userInfo.result.role,
    subject: object.userInfo.result.subject,
    time: object.userInfo.result.time,
    username: object.userInfo.result.username,
    value: 1,
    content: textarea.value,
    title: input.value,
    type: OpinionClassification.value,
  });
  console.log(res, "rress");
  if (res.code === 200) {
    console.log("res.msg");
    router.replace("/idea/list");
  }
};
</script>


<style scoped lang="scss">
.title {
  font-size: 2rem;
  color: #f49;
}
::depp(.Comments) {
  font-size: 2rem;
}
.box-card {
  height: 30rem;
}
.Comments {
  height: 6rem;
}
.card {
  width: 95%;
  margin: 2rem 1rem;
}
.line {
  width: 98%;
  margin: 2rem 1rem;
  font-size: 1.2rem;
}
.button {
  margin-left: 1.2rem;
}
.input {
  width: 40%;
  margin: 2rem 1rem;
}
.input1 {
  width: 40%;
  margin: 1rem 1rem;
}
</style>